<template>
  <div>
    <div class="signupContainer">
    <div class="signup-form">
        <h3>注册</h3>
        <form :model="signupForm">
          <div class="inputSection">
            <el-input v-model="signupForm.account" placeholder="请输入账号" />
          </div>
          <div class="inputSection">
            <el-input v-model="signupForm.name" placeholder="请输入姓名" />
          </div>
          <div class="sexSection">
            <span id="sexLabel">性别：</span>
            <el-radio-group v-model="signupForm.sex">
              <el-radio value="0" size="large">男</el-radio>
              <el-radio value="1" size="large">女</el-radio>
            </el-radio-group>
          </div>
          <div class="inputSection">
            <el-input v-model="signupForm.phoneNum" placeholder="请输入手机号" />
          </div>
          <div class="inputSection">
            <el-select class="selBox" v-model="signupForm.schSelect" filterable placeholder="--请选择大学--">
              <el-option v-for="item in signupForm.schList" :key="item.schId" :label="item.schName" :value="item.schId"></el-option>
            </el-select>
          </div>
          <div class="inputSection">
            <el-input v-model="signupForm.password" id="pwdText" placeholder="请输入密码" show-password />
          </div>
          <div class="inputSection">
            <el-input v-model="signupForm.passwordConfirm" id="pwdTextConfig" placeholder="确认密码" show-password />
          </div>
        </form>
        <div :style="tipStyle">{{ tip }}</div>
        <button class="btn" @click="signupRequest" id="signup">确认</button>
        <div class="back">
          <router-link id="toLogin" to="/login">返回登录</router-link>
        </div>
    </div>
    <div class="sysName">
      社团管理系统
    </div>
   </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import api from '@/api';
import router from '@/router';

const signupForm = reactive({
  account:'',
  name:'',
  sex:-1,
  phoneNum:'',
  schSelect: '',
  schList: [],
  password: '',
  passwordConfirm: ''
});
const tip = ref('');
const tipStyle = reactive({
  'color': 'red',
  'font-size': '12px',
  'height': '20px',
  'text-align': 'left',
  'padding-left': '40px',
})
function isPhoneNumber(phoneNum) {
    const phoneRule = /^1[3-9]\d{9}$/;
    return phoneRule.test(phoneNum);
}
async function signupRequest(){
  if( signupForm.account == '' || signupForm.name=='' ||  signupForm.sex==-1 || signupForm.phoneNum=='' || 
  signupForm.schSelect==null || signupForm.password=='' || signupForm.passwordConfirm==""){
    tipStyle.color='red'
    tip.value = "请输入所有信息"
  }
  else if(!isPhoneNumber(signupForm.phoneNum)){
    tipStyle.color='red'
    tip.value = "不支持的手机号格式！"
  }
  else if(signupForm.password !== signupForm.passwordConfirm){
    tipStyle.color='red'
    tip.value = "两次密码不一致！"
  }
  else{
    const result = await api.signup(signupForm.account,signupForm.name,
    signupForm.sex, signupForm.phoneNum,signupForm.schSelect,signupForm.password);
    switch(result[0])
    {
      case 0:
        signupHandle(result[1]);
        break;
      case 1:
        tipStyle.color='red'
        tip.value = "服务器响应错误，代码:"+result[1].status+"，请再次尝试";
        break;
      case 2:
        tipStyle.color='red'
        tip.value = "连接服务器失败,请检查网络";
        break;
      case 3:
        tipStyle.color='red'
        tip.value = "请求发送失败";
        break;
    }
  }
}
async function signupHandle(result){
  const data=result.data;
  if(data.code == 1){
    tipStyle.color='black'
    tip.value = "注册成功,未跳转请刷新页面";
    alert("注册成功");
    router.push('/login');
  }
  else if(data.msg == 'name repeat'){
    tipStyle.color='red'
    tip.value = "账号已存在";
  }
  else if(data.msg == 'easy password'){
    tipStyle.color='red';
    tip.value = "密码强度过低，请重新输入";
    signupForm.password = '';
    signupForm.passwordConfirm = '';
  }
  else{
    tipStyle.color='red'
    tip.value = "注册失败,请联系管理员!";
  }
}
onMounted(
  async () => {
  const uniResult= await api.getUniversity();
  if(uniResult[0] == 0){
    signupForm.schList = uniResult[1].data.data;
  }
  else{
    tipStyle.color='red'
    tip.value = "获取大学列表失败,请联系管理员!";
  }
})

</script>

<style scoped>
.signupContainer{
  width: 100vw;
  height: 100vh;
  background-image: url('../img/bkgd.jpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position: center;
  background-size: cover;
}
.signup-form{
  width: 380px;
  height: 610px;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 1px #5f5f5f;
  position: absolute;
  top: 14%;
  right: 10%;
  background-color: #FFF;
}
h3{
  font-family: '黑体';
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}
.sysName{
  color: #ffffff;
  position: absolute;
  font-size: 50px;
  font-family: "楷体";
  user-select: none;
  margin-left: 100px;
  margin-top: 40px;
  font-weight: 700;
  text-shadow: 0px 0px 5px #414141;
}
#signup{
  height: 40px;
  width: 300px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  background-color: #3D82FA;
  color: #FFF;
}
.inputSection{
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sexSection{
  text-align: left;
  height: 35px;
  padding-left: 45px;
}
.sexSection .el-radio-group{
  text-align: left;
  height: 35px;
  padding-left: 15px;
}
#sexLabel{
  font-size: 14px;
  position: relative;
  bottom: 2px;
}
.el-input{
  height: 40px;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #b6b6b6;
}
.el-select{
  height: 40px;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #b6b6b6;
  
}
:deep(.el-select__wrapper){
  min-height: 40px;
}
#toLogin{
  text-align: left;
  color: #5080F8;
  font-size: 13px;
  text-decoration: none;
}
.back{
  padding-top: 3px;
  padding-right: 45px;
  text-align: right;
}
</style>
